import 'dart:convert';

import "package:flutter/cupertino.dart";
import "package:flutter/material.dart";
import 'package:flutter_splash_screen/flutter_splash_screen.dart';

import '../common/helper.dart';
import '../common/icon.dart';
import "../widget/persist_tabview.dart";

import './home/index.dart';
import './calendar/index.dart';
import './profile/index.dart';

class IndexPage extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
        return new _IndexState();
    }
}

class _IndexState extends State<IndexPage> {
    
    static Map tabs = json.decode(json.encode({
        "home": {
            "count": 0,
            "name": 'ホーム'
        },
        "calendar": {
            "count": 3,
            "name": 'カレンダー'
        },
        "moment": {
            "count": 0,
            "name": '成長メモリー'
        },
        "user": {
            "count": 0,
            "name": 'マイページ'
        },
    }));
    
    int _pageIndex = 0;
    final _pages = <Widget>[
        PersistTabView(child: MyHomePage(title: tabs['home']['name'])),
        PersistTabView(child: CalendarPage(text: tabs['calendar']['name'])),
        PersistTabView(child: CalendarPage(text: tabs['moment']['name'])),
        PersistTabView(child: ProfilePage(text: tabs['user']['name'])),
    ];
    final PageController _controller = PageController(
        initialPage: 0,
    );
    
    
    
    @override
    void initState() {
        super.initState();
        Future.delayed(Duration(seconds: 3), () {
            FlutterSplashScreen.hide(); // 隐藏启动屏
        });
    }
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: PageView(
                controller: _controller,
                children: _pages,
                physics: NeverScrollableScrollPhysics(),
            ),
            bottomNavigationBar: CupertinoTabBar(
                currentIndex: _pageIndex,
                onTap: (int index) {
                    setState(() {
                        _pageIndex = index;
                    });
                    _controller.jumpToPage(index);
                },
                items: <BottomNavigationBarItem>[
                    getBottomNavigationBarItem("home", 0),
                    getBottomNavigationBarItem("calendar", 1),
                    getBottomNavigationBarItem("moment", 2),
                    getBottomNavigationBarItem("user", 3),
                ],
            ),
        );
    }
    
    getBottomNavigationBarItem(String name, int index) {
        if (tabs[name]['count'] > 0) {
            return BottomNavigationBarItem(
                icon: Stack(
                    children: <Widget>[
                        getTabsIcon(name),
                        getBadge(name),
                    ]
                ),
                activeIcon: Stack(
                    children: <Widget>[
                        getTabsIcon('$name.active'),
                        getBadge(name),
                    ]
                ),
                title: getTitle(name, index),
            );
        } else {
            return BottomNavigationBarItem(
                icon: getTabsIcon(name),
                activeIcon: getTabsIcon('$name.active'),
                title: getTitle(name, index),
            );
        }
    }
    
    getTitle(String name, int index){
       return index == _pageIndex ? Text(tabs[name]['name'],
            style: TextStyle(
                color: Color(0xFFffa10e)
            )) : Text(tabs[name]['name']);
    }

    getTabsIcon(name) {
        if(name.contains('calendar')){
            return getSizedIcon(height: 28.0, width: 28.0, path: getCalendarIconPath(name.contains('active')), icon: getCalendarIconName(name));
        }
        return getSizedIcon(height: 28.0, width: 28.0, path: 'tabs', icon: name);
    }
    
    getBadge(name) {
        return Positioned(
            right: 0,
            child: Container(
                padding: EdgeInsets.all(1),
                decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(6),
                ),
                constraints: BoxConstraints(
                    minWidth: 12,
                    minHeight: 12,
                ),
                child: Text(
                    tabs[name]['count'].toString(),
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 8,
                    ),
                    textAlign: TextAlign.center,
                ),
            ),
        );
    }
    
    getCalendarIconPath(isActive){
        if(isActive){
            return 'tabs/calendar/active';
        }
        return 'tabs/calendar/default';
    }

    getCalendarIconName(name){
        DateTime now = DateTime.now();
        return now.day.toString();
    }
}
